<template>
    <div
        id="model-container"
        style="width: 100%; height: 500px"
        v-loading="loading"
    ></div>
</template>
<script>
export default {
    name: "Demo-Table",
};
</script>
<script setup>
import { onBeforeUnmount, onMounted, ref } from "vue";
import InitScene from "./loadModal/InitScene";
import TWEEN from "@tweenjs/tween.js";

let Modal = null;

const _Scene = ref(null);
const _Camera = ref(null);
const _Controls = ref(null);
const loading = ref(false);
let url = "/static/model/能耗分析.gltf";

onMounted(async () => {
    Modal = new InitScene("model-container");

    const { Scene, Camera, Controls } = Modal;
    _Scene.value = Scene;
    _Camera.value = Camera;
    _Controls.value = Controls;

    loadModel();
});

const loadModel = async () => {
    loading.value = true;
    let model = await Modal.loadGLTF(url, (val) => {
        if (val === 100) {
            loading.value = false;
        }
    });

    new TWEEN.Tween(_Camera.value.position)
        .to(
            {
                x: -0.426,
                y: 74.6,
                z: 95,
            },
            1000
        )
        .easing(TWEEN.Easing.Quadratic.Out)
        .onComplete(() => {})
        .start();
};

onBeforeUnmount(() => {
    Modal && Modal.destroy();
    Modal = null;
    requestID && cancelAnimationFrame(requestID);
});
</script>
